<template>
  <div class="doyou">
    <h2>{{ dyData.title }}</h2>
    <div class="doyou_warp" v-for="(item, i) in dyData.list" :key="i">
      <h2>{{ item.tiname }}</h2>
      <div class="doyou_warp_img">
        <img :src="item.imgUrl" alt="" />
      </div>

      <ul class="doyou_item_ul">
        <li
          class="doyou_item_li tydisplay"
          v-for="(item, i) in item.warp"
          :key="i"
        >
          <div class="doyou_item_li_left">
            <img :src="item.url" alt="" />
          </div>
          <div class="doyou_item_li_left">
            <p class="doyou_item_li_left_n">{{ item.name }}</p>
            <p class="doyou_item_li_left_c">{{ item.duan }}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "doyou",
  props: ["dyData"],
};
</script>

<style scoped>
.tydisplay {
  display: flex;
}
.doyou {
  color: #1d2845;
  font-size: 1.3em;
  text-align: center;
  padding: 30px 15px 0 15px;
}
.doyou>h2{
  margin-bottom: 50px;
}
.doyou_warp{
  padding-bottom: 30px;
}
.doyou_warp > h2 {
  font-size: 1.2em;
  margin: 25px 0 30px 0;
}
.doyou_warp_img > img {
  width: 55%;
}
.doyou_item_ul{
  margin-top: 20px;
}
.doyou_item_li {
  border-bottom: 1px solid #e0e0e0;
  padding: 15px 0;
}
.doyou_item_li_left {
  margin-right: 10px;
}
.doyou_item_li_left_n {
  font-size: 1em;
  font-weight: bold;
  text-align: left;
  margin-bottom: 8px;
}
.doyou_item_li_left_c {
  font-size: 0.9em;
  color: #6f7b8e;
  text-align: left;
}
</style>